<script setup>
import { useHamburgerStore } from "@/store/hamburger";
const hamburgerStore = useHamburgerStore();
const props = defineProps(["hamburger"]);
</script>
<template>
  <div class="counter">
    <template v-if="props.hamburger.count > 0">
      <button
        class="minus"
        @click="hamburgerStore.subHamburgerFromCart(props.hamburger)"
      >
        <i class="ri-subtract-line"></i>
      </button>
      <span class="num">{{ props.hamburger.count }}</span>
    </template>
    <button
      class="plus"
      @click="hamburgerStore.addHamburgerToCart(props.hamburger)"
    >
      <i class="ri-add-line"></i>
    </button>
  </div>
</template>

<style scoped>
.counter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.minus,
.plus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  border: none;
  font-size: 36rem;
  /* font-weight: bold; */
  background-color: rgb(235, 179, 0);
}
.minus {
  border: 1px solid #000000;
  background-color: #fff;
}
.num {
  margin: 0 10rem;
  font-size: 30rem;
}
</style>
